<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div>
        <button onclick="doAjax()">$.ajax(...)</button>
        <button onclick="doAjaxGet()">$.doAjaxget(...)</button>
        <button onclick="doGetJson()">$.getJson(...)</button>
        <button onclick="doAjaxPost()">$.post(...)</button>
        <button onclick="load()">$.("selector").load(...)</button>
    </div>
    <div id="result">

    </div>
<script>
    function doAjaxPost(){
        let url = "http://localhost:1314/doPost"
        var params = "id=1&name=xiaomi&letter=x"
        $.post(url,params,function(result){
            console.log(result);
        })
    }

    function doAjaxJson(){
        let url = "http://localhost:1314/doGet";
        let params="";
        $.getJSON(url,params,function(result){
            console.log(result);
        });
    }

    function doAjaxGet(){
        let url = "http://localhost:1314/doGet";
        let params="";
        $.get(url,params,function(result){
            console.log(result);
        });
    }

    function doAjax(){
        debugger;
        let url = "http://localhost:1314/doAjax";
        let params = "msg=hello jquery ajax";
        $.ajax({
            url:url,
            data:params,
            success:function(result){
                $("#result").html(result);
            },
            error:function(){
                $("#result").html("request faild");
            }
        });
    }
</script>
</body>
</html>